import * as React from 'react';
import { RouteObject } from "react-router-dom";


const RouteApp = React.lazy(()=> import('./routes/route-app'))
const StudentTable = React.lazy(()=> import('./pages/react-query/student-table'))
const Front = React.lazy(()=> import('./routes/front'))
const Back = React.lazy(()=> import('./routes/back'))
const Invoices = React.lazy(()=> import('./routes/invoice'))
const Invoice = React.lazy(()=> import('./routes/invoices'))
const Counter = React.lazy(()=> import('./pages/zustand-study/counter'))
const Math = React.lazy(()=> import('./pages/math'))


const routes: RouteObject[] = [
	{
		path: '/',
		element: (<RouteApp />),
		children: [
			{
				index: true,
				element: (
					<h1>select choice</h1>
				)
			},
			{
				path: 'student',
				element: (<StudentTable />)
			},
			{
				path: 'front',
				element: (<Front />)
			},
			{
				path: 'back',
				element: (<Back />)
			},
			{
				path: 'invoices',
				element: (<Invoices />),
				children: [
					{
						index: true,
						element: (
							<main style={{ padding: "1rem" }}>
								<p>Select an invoice</p>
							</main>
						)
					},
					{
						path: ':num',
						element: (<Invoice />)
					},
				]
			},
			{
				path: 'zustand',
				element: (<Counter />)
			},
			{
				path: 'math',
				element: (<Math />)
			}
		]
	},
	{
		path: '*',
		element: (
			<main>
				<p>暂无页面</p>
			</main>
		)
	},
	{
		path: 'privacy',
		element: (
			<Back><h2>Privacy</h2></Back>
		)
	},
	{
		path: 'tos',
		element: (
			<h2>Tos</h2>
		)
	}
]

export default routes;